<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电影列表</title>
</head>
<body>
  <div id="root"></div>
  <script src="../lib/react.js"></script>
  <script  cript src="../lib/react-dom.js"></script>
  <script src="../lib/babel-min.js"></script>

<script type="text/babel">

  const root = ReactDOM.createRoot(document.querySelector("#root"));

  class App extends React.Component {
    constructor() {
      super();
      this.state = {
        movies: [
          {
            id: 1,
            name: '星际穿越',
            price: 120
          },
          {
            id: 2,
            name: '大话西游',
            price: 118
          },
          {
            id: 3,
            name: '泰坦尼克号',
            price: 68
          }
        ]
      }
    }

    render() { 

      return (
        <div>
          <h2>电影</h2>
          <ul>
            {this.state.movies.map(item => <li>{item.name}</li>)}
          </ul>
        </div>
      )
    }

  }
  // <App/> = jsx -> React.createElement
  root.render(<App/>);
</script>

  

</body>
</html>